<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="webgpu" width="500" height="500"></canvas>
    <script type="module">
        // WebGPU提供了很多相关的API，通过这些WebGPU API可以控制你的显卡GPU渲染3D场景或计算数据
        
        // GPU概念解释：所谓GPU就是图形处理器，再说具体点，就是你电脑上的显卡，如果为了追求更好的性能，一般会在电脑上安装独立显卡
        
        // GPU 设备对象

        // 浏览器请求GPU适配器
        const adapter = await navigator.gpu.requestAdapter();
        // 获取GPU设备对象，通过GPU设备对象device的WebGPU API可以控制GPU渲染过程
        const device = await adapter.requestDevice();
        console.log('device', device);
        
        const canvas = document.getElementById('webgpu');
        const context = canvas.getContext('webgpu');
        const format = navigator.gpu.getPreferredCanvasFormat();
        
        context.configure({
            device: device,     // WebGPI渲染使用的GPU设备对象
            format: format,     // 颜色格式
        });
        
    </script>
</body>
</html>